<template>
  <div class="app-container ">
    <div class="filter-container ">
      <el-input
        v-model="listQuery.title"
        placeholder="名称|品牌|城市"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button class="filter-item m-l-2" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item m-l-2" type="danger" @click="toggleSelection()">全部删除</el-button>
      <el-checkbox v-model="status" class="filter-item" style="margin-left:15px;">
        显示模式切换
      </el-checkbox>
      <el-checkbox
        v-if="!status"
        v-model="showReviewer"
        class="filter-item"
        style="margin-left:15px;"
        @change="tableKey = tableKey + 1"
      >
        显示地址详情
      </el-checkbox>
    </div>
    <div v-if="status">
      <div class="local-row">
        <div v-for="item in list" :key="item" class="ima-box">
          <el-tooltip placement="top">
            <div slot="content">

              名称:{{ item.name }}<br>
              大小:{{ item.fsize }}<br>
              拍摄时间:{{ item.shootTime }}<br>
              品牌:{{ item.brand }}<br>
              城市:{{ item.city }}<br>
              详细地址:{{ item.formatted_address }}<br>
            </div>
            <el-image class="image-row" :src="item.urlsmall" :preview-src-list="[item.urlbig]" lazy>
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div v-else>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="头像" align="center" width="80">
          <template slot-scope="{row}">
            <el-image fit="cover" :src="row.wxuser.headimgurl" />
          </template>
        </el-table-column>
        <el-table-column label="用户昵称" align="center" width="150px">
          <template slot-scope="{row}">
            <span class="link-type">{{ row.wxuser.nickname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="文件夹" width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.path }}</span>
          </template>
        </el-table-column>
        <el-table-column label="文件名" min-width="200px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="大小" width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.fsize }}</span>
          </template>
        </el-table-column>
        <el-table-column label="拍摄日期" width="200px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.shootTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="图片" width="200px" align="center">
          <template slot-scope="{ row }">
            <el-image fit="cover" :src="row.urlsmall" :preview-src-list="[row.url]" />
          </template>
        </el-table-column>
        <el-table-column label="品牌" width="110px" align="center">
          <template slot-scope="{row}">
            <span v-if="row.brand != null">{{ row.brand }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="城市" width="110px" align="center">
          <template slot-scope="{row}">
            <span v-if="row.city != null">{{ row.city }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column v-if="showReviewer" label="地址" align="center">
          <template slot-scope="{row}">
            <span v-if="row.formatted_address != null">{{ row.formatted_address }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="是否推荐" width="110px" align="center">
          <template slot-scope="{row}">
            <el-switch v-model="row.is_push" active-color="#13ce66" @change="isPush(row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100px" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <el-button size="mini" type="danger" @click="handleDelete(row.id, $index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-divider content-position="right">tch</el-divider>
    <pagination
      v-if="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { localList, localdelete } from '@/api/local'
import { updateImage } from '@/api/image'
import Pagination from '@/components/Pagination2'
export default {
  name: 'ComplexTable',
  components: { Pagination },
  data() {
    return {
      status: false,
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      showReviewer: false,
      multipleSelection: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      localList(this.listQuery).then(response => {
        this.list = response.data
        this.total = response.count
        this.listLoading = false
      }).catch(err=>{
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 删除
    handleDelete(row, index) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localdelete({ ids: row }).then(response => {
          this.$notify({
              title: 'Success',
              message: 'Delete Successfully',
              type: 'success',
              duration: 2000
            })
            this.list.splice(index, 1)
        }).catch(err=>{
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 全部删除
    toggleSelection() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'error',
          message: '请选择要删除的数据'
        })
        return
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = []
        const id = this.multipleSelection.filter(index => {
          ids.push(index.id)
          return index.id
        })
        localdelete({ ids: ids }).then(response => {
          this.$notify({
              title: 'Success',
              message: 'Delete Successfully',
              type: 'success',
              duration: 2000
            })
            this.getList()
        }).catch(err=>{
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    open() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 推荐开关触发
    isPush(row) {
      this.updateData(row)
    },
    updateData(row) {
      this.dialogFormVisible = true
      updateImage({
        id: row.id,
        is_push: row.is_push
      }).then(response => {
        this.dialogFormVisible = false
        this.$notify({
            title: '操作成功',
            message: '是否推荐首页更改成功',
            type: 'success',
            duration: 2000
          })
      }).catch(err=>{
        console.log(err)
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.local-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* height: 846px; */

}

.ima-box {
    width: 152px;
    height: 92px;
}

.image-row {
    width: 150px;
    height: 90px;
}

.switch-box {
    color: #909399;
    display: inline-block;
    margin-left: 25px;

    span {
        padding-left: 5px;
        font-size: 14px;
    }

}
</style>
